<template>
  <div class="review-content">
    <div class="review-top">
      <div class="review-left flex">
        <div class="review-item">
          <div>
            <div class="result-icon">
              <Icon icon="ep:checked" :size="44" color="#fff" />
            </div>
            <span class="result-text">模型综合得分</span>
          </div>
          <div>
            <span>已完成</span>
            <Icon icon="ep:circle-check" />
          </div>
        </div>
        <div class="review-item">
          <div>
            <span>评价模板名称</span>
            <div>评价模板1</div>
          </div>
          <div>
            <span>专业分类</span>
            <div>专业分类名称1</div>
          </div>
          <div>
            <span>信息模态</span>
            <div>图片</div>
          </div>
          <div></div>
          <div></div>
        </div>
        <div class="review-item">
          <XButton
          title="人工复核"
          class="w-[100%]"
          type="primary"
          @click="handleReview"
        />
        <XButton
          title="生成测评报告"
          class="w-[100%]"
          type="primary"
          @click="handleReport"
        />
        </div>
      </div>
      <div class="review-right">
        <Echart :options="gaugeOptions" :height="400" class="echart-warp" />
      </div>
    </div>
    <div class="review-center">
      <!-- 不同类型指标得分占比 -->
      <el-card shadow="never" class="mt-16px mb-16px">
        <el-skeleton :loading="loading" animated>
          <Echart :options="pieOptions" :height="330" class="title-before"  />
        </el-skeleton>
      </el-card>
      <!-- 不同缺陷不同指标得分 -->
      <el-card shadow="never" class="mt-16px mb-16px">
        <el-skeleton :loading="loading" animated>
          <Echart :options="radarOption" :height="330" class="title-before"  />
        </el-skeleton>
      </el-card>
    </div>
    <div class="review-bottom"></div>
  </div>
  
  <!-- 弹窗: 查看问题原因 -->
  <ViewIssues ref="issuesRef" />
  <!-- 弹窗：自定义指标评分权重 -->
  <EditScore ref="editRef" />
</template>
<script setup lang="ts">
import { EChartsOption } from 'echarts'
import { pieOptions, radarOption, gaugeOptions } from './echarts-data'

/** 评测任务 表单 */
defineOptions({ name: 'EvaluationReview' })

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    // const data = await EvaluationTaskItemApi.getEvaluationTaskItemPage(queryParams)
  } finally {
    loading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.review-top {
  .review-left {
    background: #E5F5F3;
    border-left: 2px solid var(--el-color-primary);
    border-radius: 5px;
    padding: 16px;
    .review-item {
      &:first-child {
        margin-left: 60px;
      }
      &:nth-child(1) {
        border-left: 1px solid var(--el-color-primary);
        border-right: 1px solid var(--el-color-primary);
      }
    }
  }
  
}
.echart-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  text-align: left;
  color: #333;
  position: relative;
  margin-bottom: 16px;
  &::before {
    position: absolute;
    z-index: 10;
    display: block;
    width: 4px;
    height: 24px;
    left: -16px;
    background-color: var(--el-color-primary);
    content: '';
  }
}
.echart-item {
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    .echart-item-title {
      width: 20%;
      font-weight: 700;
      font-size: 16px;
      color: #333;
      text-align: center;
      padding-left: 5%
    }
    .echart-warp {
      width: 80%;
    }
  }
</style>